﻿<html>
<head>
    <title>驰骋工作流</title>
    <link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../Scripts/bootstrap/js/jquery.min.js"></script>
    <script src="../Scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="../Scripts/bootstrap/bootstrap-paginator/css/bootstrapv3.css" rel="stylesheet"
        type="text/css" />
    <script src="../Scripts/bootstrap/bootstrap-paginator/js/bootstrap-paginator.js"
        type="text/javascript"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <!-- 引用通用的js文件. -->
    <script type="text/javascript" src="../Scripts/config.js"></script>
    <script type="text/javascript" src="../Comm/Gener.js"></script>
    <style type="text/css">
        .keyWordInput
        {
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            height: 30px;
        }
        .menuGroup
        {
            float: left;
        }
        .menuGroup a
        {
            margin-left:10px;
        }
        .menuGroupSelected
        {
            color: Blue; /* 文字颜色 */
            font-weight: bold;
            text-decoration: none;
            padding-bottom:5px;
            border-bottom: 3px solid Blue;
        }
    </style>
    <script type="text/javascript" language="javascript">
        var mapExt = null;
        //页面启动函数.
        $(function () {
            SetTableSize();
            //重置页面内容
            ResetHtml();
            //实体参数.
            var ensName = GetQueryString("EnsName");
            mapExt = new Entity("BP.Sys.MapExt");
            mapExt.MyPK = "DtlImpByJSON_" + ensName;
            var i = mapExt.RetrieveFromDBSources();
            if (i == 0) {
                alert("没有配置导入数据相关参数。");
                return;
            }
            if (mapExt.Tag1 == "" || mapExt.Tag2 == "" || mapExt.Tag3 == "") {
                alert("参数配置错误，请联系管理员。");
                return;
            }

            //分组标签
            InitGroupLabel();
            //输入关键字查询数据
            InputKeyWordData();
            //绑定事件
            $('.menuGroup a').each(function () {
                var aLabel = $(this);
                aLabel.click(function () {
                    $('.menuGroup a').each(function () {
                        $(this).removeClass("menuGroupSelected");
                    });
                    $(this).toggleClass("menuGroupSelected");
                });
            });

            $('#TB_Key').bind('input propertychange', function () {
                InputKeyWordData();
            });
        });

        //设置表格高度
        function SetTableSize() {
            var height = $(window).innerHeight();
            height = height - 150;
            $("#tableContent").height(height);
        }
        
        //初始化标签
        function InitGroupLabel() {
            var ifcData = null;
            if (mapExt.DBType == 0) {//SQL 模式
                var sql = mapExt.Tag2;
                ifcData = DBAccess.RunSQLReturnTable(sql);
            }

            if (mapExt.DBType == 1) {//JSON模式
                var url = mapExt.Tag2;
                ifcData = DBAccess.RunUrlReturnJSON(url);
            }
            
            $("#groupDiv").html("");
            if (ifcData && ifcData.length > 0) {
                var data = ifcData[0];
                var oKeys = [];
                for (var key in data) {
                    oKeys.push(key);
                }

                if (oKeys.length < 2) {
                    alert("返回数据格式有问题，列的数量小于2。");
                    return;
                }

                var noKey = oKeys[0];
                var nameKey = oKeys[1];

                $("#groupDiv").append("<a id='all' class='menuGroupSelected' href='javascript:void(0);'>全部</a>");
                $.each(ifcData, function (i, dataObj) {
                    var no = dataObj[noKey];
                    var name = dataObj[nameKey];
                    $("#groupDiv").append("<a id='" + no + "' href='javascript:void(0);'>" + name + "</a>");
                });
            } else {
                $("#groupDiv").append("<a id='all' class='menuGroupSelected' href='javascript:void(0);'>全部</a>");
            }

            $("#groupDiv a").unbind("click").bind("click", function () {
                var value = this.id;
                OnClickGroupLabelData(value);
            });
        }

        //输入关键字进行查询
        function InputKeyWordData() {
            var data = null;
            var UserNo = GetQueryString("UserNo");
            var RefPKVal = GetQueryString("RefPKVal");
            var keyWord = $("#TB_Key").val();
            if (mapExt.DBType == 0) {//SQL 模式
                var sql = mapExt.Tag1;
                while (sql.indexOf("@Key") > -1) {
                    sql = sql.replace("@Key", keyWord);
                }
                sql = encodeURI(sql);
                data = DBAccess.RunSQLReturnTable(sql);
            }
            if (mapExt.DBType == 1) {//JSON模式
                var url = mapExt.Tag1;
                keyWord = encodeURI(keyWord);

                url = url.replace("@Key", keyWord);
                url = url + "&UserNo=" + UserNo + "&RefPKVal=" + RefPKVal;
                data = DBAccess.RunUrlReturnJSON(url);
            }

            $("#jsonDataTable").html("");
            if (data && data.length > 0) {
                InitTableByData(data);
            }
        }

        //点击标签返回的数据
        function OnClickGroupLabelData(groupValue) {
            var data = null;
            var UserNo = GetQueryString("UserNo");
            var RefPKVal = GetQueryString("RefPKVal");
            groupValue = groupValue == "all" ? "" : groupValue;
            if (mapExt.DBType == 0) {//SQL 模式
                var sql = mapExt.Tag3;
                while (sql.indexOf("@Key") > -1) {
                    sql = sql.replace("@Key", groupValue);
                }
                data = DBAccess.RunSQLReturnTable(sql);
            }
            if (mapExt.DBType == 1) {//JSON模式
                var url = mapExt.Tag3;
                var keyWord = $("#TB_Key").val();
                url = url.replace("@Key", groupValue);
                url = url + "&UserNo=" + UserNo + "&RefPKVal=" + RefPKVal;
                data = DBAccess.RunUrlReturnJSON(url);
            }

            $("#jsonDataTable").html("");
            if (data && data.length > 0) {
                InitTableByData(data);
            }
        }

        //数据返回Table
        function InitTableByData(dataTable) {
            //获取数据列名
            var columns = [];
            var texts = [];
            var heads = [];
            var tag = mapExt.Tag;
            if (tag.length > 0) {
                texts = tag.split(',');
            }
            for (var col in dataTable[0]) {
                columns.push(col);
            }
            
            //以中文个数为表格显示列的个数
            if (texts && texts.length > 0) {
                for (var i = 0; i < texts.length; i++) {
                    var text = texts[i];
                    if (text == "")
                        continue;

                    var value = columns[i];
                    if (typeof value == "undefined") {
                        value = "";
                    }

                    var column = {};
                    column.No = value;
                    column.Name = text;
                    heads.push(column);
                }
            } else {
                $.each(columns, function (i, col) {
                    var column = {};
                    column.No = col;
                    column.Name = col;
                    heads.push(column);
                });
            }

            //表头
            var thread = $('<thead></thead>');
            var threadTr = $('<tr></tr>');
            //复选框
            var thFirst = $("<th style='width:35px;'></th>");
            var ckBox = $("<input type='checkbox' onclick='CheckAll()' id='CB_CheckAll' >");
            thFirst.append(ckBox);
            threadTr.append(thFirst);
            $.each(heads, function (i, head) {
                var th = $("<th></th>");
                th.text(head.Name);
                th.data(head);
                threadTr.append(th);
            });
            thread.append(threadTr);
            $("#jsonDataTable").append(thread);

            //生成表格体
            var tbody = $('<tbody></tbody>');
            $.each(dataTable, function (i, dataObj) {
                var tbodyTr = $('<tr></tr>');
                var tdFirst = $("<td></td>");
                //第一列为主键
                var refPK = heads[0].No;
                var no = dataObj[refPK];

                var ckBox = $("<input type='checkbox'/>");
                ckBox.attr("id", "CB_" + no);
                ckBox.data(dataObj);
                tdFirst.append(ckBox);

                tbodyTr.append(tdFirst);
                //字段列
                $.each(heads, function (i, head) {
                    var td = $("<td></td>");
                    var text = "";

                    if (head.No && head.No != "") {
                        text = dataObj[head.No];
                    }
                    td.text(text);
                    tbodyTr.append(td);
                });
                tbody.append(tbodyTr);
            });
            $("#jsonDataTable").append(tbody);
        }

        //ajax获取后台数据
        function initTable() {
            var tbody = "";
            $.ajax({
                type: 'POST',
                dataType: "json",
                async: false,
                url: "table.jsp", //请求的action路径页面
                data: { "flag": true },
                error: function () {//请求失败处理函数 
                    alert('请求失败');
                },
                success: function (data) { //请求成功后处理函数。 
                    tbody = "<tr class='success'><th>设备标识号</td><th  align='center'>设备类别</td><th  align='center'>参数编码</td><th  align='center'>失效模式编码</td><th  align='center'>数据来源</td></tr>";
                    $.each(data.list, function (i, n) {
                        var trs = "";
                        trs += "<tr><td align='center'>" + n.sbbsh + "</td><td align='center'>" + n.sblb + "</td><td align='center'>" + n.csbm + "</td><td align='center'>" + n.sxcode + "</td><td align='center'>" + n.sjly + "</td></tr>";
                        tbody += trs;
                    });
                    $("#testTable").html(tbody);
                    var pageCount = data.pageCount; //取到pageCount的值
                    var currentPage = data.CurrentPage; //得到currentPage

                    var options = {
                        bootstrapMajorVersion: 3, //版本
                        currentPage: currentPage, //当前页数
                        totalPages: pageCount, //总页数
                        numberOfPages: 5,
                        itemTexts: function (type, page, current) {
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "末页";
                                case "page":
                                    return page;
                            }
                        }, //点击事件，用于通过Ajax来刷新整个list列表
                        onPageClicked: function (event, originalEvent, type, page) {
                            $.ajax({
                                url: "table.jsp",
                                type: "Post",
                                dataType: "json",
                                data: "page=" + page,
                                success: function (data) {
                                    tbody1 = "<tr class='success'><th>设备标识号</td><th  align='center'>设备类别</td><th  align='center'>参数编码</td><th  align='center'>失效模式编码</td><th  align='center'>数据来源</td></tr>";
                                    $.each(data.list, function (i, n) {
                                        var trs = "";
                                        trs += "<tr><td align='center'>" + n.sbbsh + "</td><td align='center'>" + n.sblb + "</td><td align='center'>" + n.csbm + "</td><td align='center'>" + n.sxcode + "</td><td align='center'>" + n.sjly + "</td></tr>";
                                        tbody1 += trs;
                                    });
                                    $("#testTable").html(tbody1);
                                }
                            });
                        }
                    };
                    $('#example').bootstrapPaginator(options);
                }
            });
        }

        //重置标签
        function ResetHtml() {
            $("#groupDiv").html("");
            $("#jsonDataTable").html("");
        }

        //全选
        function CheckAll() {
            var checked = document.getElementById('CB_CheckAll').checked;
            $.each($(":checkbox"), function () {
                this.checked = checked;
            });
        }

        //确定按钮，导入数据
        function DalogModelOK() {
            //实体参数.
            var EnsName = GetQueryString("EnsName");
            var refPKVal = GetQueryString("RefPKVal");
            var PWorkID = GetQueryString("PWorkID");
            var FK_Node = GetQueryString("FK_Node");
            var FID = GetQueryString("FID");
            var UserNo = GetQueryString("UserNo");
            var paraDatas = [];
            $.each($(":checkbox"), function (i, cb) {
                if (cb.checked) {
                    var data = $(cb).data();
                    if (data) {
                        paraDatas.push(data);
                    }
                }
            });
            if (paraDatas.length == 0) {
                alert("没有选择导入数据，请选择！");
                return;
            }
            //插入明细表数据
            var dtl = new Entity(EnsName);
            $.each(paraDatas, function (i, data) {
                dtl.CopyJSON(data);
                dtl.RefPK = refPKVal;
                dtl.Rec = UserNo;
                dtl.OID = 0;
                dtl.FID = FID;
                dtl.Insert();
            });

            //执行完毕关闭弹窗
            DalogModelCose();
        }

        //取消，关闭弹出层
        function DalogModelCose() {
            if (window.parent && window.parent.CloseBootstrapDialog) {
                window.parent.CloseBootstrapDialog("取消");
            }
        }
    </script>
</head>
<body>
    <form id="cc">
    <table style="border: 0px; width: 99%;table-layout: fixed;">
        <tr>
            <td>
                <div id="searchDiv" style='text-align: left;'>
                    <input type="text" id="TB_Key" value="" class="keyWordInput" style="width: 60%;" placeholder="输入付款人、金额进行搜索"/>
                </div>
            </td>
        </tr>
        <tr id="groupTr">
            <td style="height: 60px; text-align: left;">
                <div id="groupDiv" class="menuGroup">
                    <a href="javascript:void(0);">全部</a> 
                    <a class="menuGroupSelected" href="javascript:void(0);">携程商旅</a> 
                    <a href="javascript:void(0);">滴滴出行</a>
                </div>
            </td>
        </tr>
        <tr>
            <td style="border: 1px #FF8000 solid;">
                <div id="tableContent" style="overflow:auto;">
                    <div>
                        <table class="table table-striped" id='jsonDataTable'></table>
                    </div>
                    <div style="text-align: left;">
                        <ul id="examplePagetions"></ul>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="float:right;">
                <div style="margin-top:10px; margin-right:10px;">
                    <input type="button" class="btn" onclick="DalogModelCose()" value="取消" />
                    <input type="button" class="btn btn-danger" onclick="DalogModelOK()" value="确定" />
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
